{% extends "base.html" %}

{% block title %}Пробные тарифы{% endblock %}
{% block title_header %}Пробные тарифы{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h6 class="text-lg font-semibold">Управление пробными тарифами</h6>
        <button class="btn btn-primary" onclick="showCreateTrialModal()">
            <i class="bi bi-plus-lg me-2"></i>Добавить тариф
        </button>
    </div>

    <div class="dataTables_wrapper">
        <table id="trialSettingsTable" class="table table-hover align-middle dataTable">
            <thead>
                <tr>
                    <th class="text-sm" style="width: 60px;">#</th>
                    <th class="text-sm" style="width: 200px;">Наименование</th>
                    <th class="text-sm" style="width: 120px;">Кол-во дней</th>
                    <th class="text-sm" style="width: 200px;">Сервер</th>
                    <th class="text-sm" style="width: 100px;">Статус</th>
                    <th class="text-sm" style="width: 120px;">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for setting in settings %}
                <tr>
                    <td class="text-sm">{{ setting.id }}</td>
                    <td class="text-sm">{{ setting.name }}</td>
                    <td class="text-sm">{{ setting.left_day }}</td>
                    <td class="text-sm">{{ setting.server_name }}</td>
                    <td class="text-sm">
                        {% if setting.is_enable %}
                        <span class="text-sm">Активен</span>
                        {% else %}
                        <span class="text-sm" style="color: rgb(235, 137, 137);">Отключен</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm edit-btn" style="color: white;" onclick="editTrialSetting({{ setting.id }})">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm delete-btn" style="color: white;" onclick="deleteTrialSetting({{ setting.id }})">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Модальное окно для добавления/редактирования -->
<div class="modal fade" id="trialSettingModal" tabindex="-1" aria-labelledby="trialSettingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="trialSettingModalLabel">Добавить пробный тариф</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="trialSettingForm">
                    <input type="hidden" id="trialSettingId">
                    
                    <div class="mb-3">
                        <label for="trialName" class="form-label">Наименование</label>
                        <input type="text" class="form-control" id="trialName" required>
                    </div>

                    <div class="mb-3">
                        <label for="leftDay" class="form-label">Кол-во дней</label>
                        <input type="number" class="form-control" id="leftDay" required min="1">
                    </div>

                    <div class="mb-3">
                        <label for="serverId" class="form-label">Сервер</label>
                        <select class="form-select" id="serverId" required>
                            <option value="">Выберите сервер</option>
                        </select>
                    </div>

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="isEnable">
                        <label class="form-check-label" for="isEnable">Активен</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" onclick="saveTrialSetting()">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function getCountryCode(serverName) {
    // Проверяем, начинается ли имя сервера с эмодзи флага
    const match = serverName.match(/^(?:\uD83C[\uDDE6-\uDDFF]){2}/);
    if (!match) return null;

    // Получаем Unicode символы флага
    const flag = match[0];
    // Преобразуем Unicode в буквенный код страны
    const code = Array.from(flag)
        .map(char => char.codePointAt(0))
        .map(code => String.fromCharCode(code - 127397))
        .join('')
        .toLowerCase();
    
    return code;
}

function formatServerName(serverName) {
    if (!serverName) return '-';
    
    const code = getCountryCode(serverName);
    if (!code) return serverName;

    // Получаем название страны (убираем эмодзи флага)
    const name = serverName.replace(/^(?:\uD83C[\uDDE6-\uDDFF]){2}\s*/, '');
    
    return `<div class="d-flex align-items-center gap-2">
              <img src="/static/flag/${code}.svg" alt="${code}" style="width: 16px; height: 16px;">
              <span>${name}</span>
            </div>`;
}

let trialSettingModal;

$(document).ready(function() {
    trialSettingModal = new bootstrap.Modal(document.getElementById('trialSettingModal'));
    
    // Инициализация DataTables
    const table = $('#trialSettingsTable').DataTable({
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/ru.json'
        },
        order: [[0, 'desc']],
        responsive: true,
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: 5 },
            {
                targets: 3, // Колонка с сервером
                render: function(data, type, row) {
                    if (type === 'display') {
                        return formatServerName(data);
                    }
                    return data;
                }
            }
        ]
    });

    // Загружаем список серверов при открытии модального окна
    $('#trialSettingModal').on('show.bs.modal', loadServers);
});

async function loadServers() {
    try {
        const response = await fetch('/admin/trial-settings/api/servers');
        if (!response.ok) throw new Error('Ошибка получения списка серверов');
        
        const servers = await response.json();
        const select = document.getElementById('serverId');
        
        // Очищаем текущие опции, оставляя только первую (placeholder)
        select.innerHTML = '<option value="">Выберите сервер</option>';
        
        // Добавляем новые опции
        servers.forEach(server => {
            const option = document.createElement('option');
            option.value = server.id;
            option.textContent = server.name;
            select.appendChild(option);
        });
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при загрузке списка серверов');
    }
}

function showCreateTrialModal() {
    document.getElementById('trialSettingModalLabel').textContent = 'Добавить пробный тариф';
    document.getElementById('trialSettingForm').reset();
    document.getElementById('trialSettingId').value = '';
    document.getElementById('isEnable').checked = true;
    trialSettingModal.show();
}

async function editTrialSetting(id) {
    try {
        const response = await fetch(`/admin/trial-settings/api/trial-settings/${id}`);
        if (!response.ok) throw new Error('Ошибка получения данных пробного тарифа');
        
        const setting = await response.json();
        document.getElementById('trialSettingModalLabel').textContent = 'Редактировать пробный тариф';
        document.getElementById('trialSettingId').value = setting.id;
        document.getElementById('trialName').value = setting.name;
        document.getElementById('leftDay').value = setting.left_day;
        document.getElementById('serverId').value = setting.server_id;
        document.getElementById('isEnable').checked = setting.is_enable;
        
        trialSettingModal.show();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при получении данных пробного тарифа');
    }
}

async function saveTrialSetting() {
    try {
        const settingId = document.getElementById('trialSettingId').value;
        const data = {
            name: document.getElementById('trialName').value,
            left_day: parseInt(document.getElementById('leftDay').value),
            server_id: parseInt(document.getElementById('serverId').value),
            is_enable: document.getElementById('isEnable').checked
        };

        const url = settingId ? 
            `/admin/trial-settings/api/trial-settings/${settingId}` : 
            '/admin/trial-settings/api/trial-settings';
        const method = settingId ? 'PUT' : 'POST';

        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) throw new Error('Ошибка сохранения пробного тарифа');

        trialSettingModal.hide();
        window.location.reload();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при сохранении пробного тарифа');
    }
}

async function deleteTrialSetting(id) {
    if (!confirm('Вы уверены, что хотите удалить этот пробный тариф?')) return;

    try {
        const response = await fetch(`/admin/trial-settings/api/trial-settings/${id}`, {
            method: 'DELETE'
        });

        if (!response.ok) throw new Error('Ошибка удаления пробного тарифа');

        window.location.reload();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при удалении пробного тарифа');
    }
}
</script>
{% endblock %}